<template>
  <div v-loading.lock="loading" class="base-content">
    <div class="basic-info">
      <el-form ref="queryForm" :inline="true" :model="queryForm">
        <el-form-item label="文件夹" prop="archiveDicName">
          <el-input
            v-model="archiveDicName"
            placeholder="文件夹"
            style="width: 90%"
          />
        </el-form-item>
        <el-form-item
          label="文件列表"
          prop="archiveNumName"
          style="margin-left: -35px"
        >
          <el-input
            v-model="archiveNumName"
            placeholder="请输入文件夹编号或名称"
          />
        </el-form-item>
      </el-form>
      <div class="main-layout">
        <!--文件夹-->
        <div class="sideBar-left">
          <el-row>
            <el-col :span="8"
              ><el-button
                v-rights="'AddArchiveDic'"
                type="success"
                @click="addArchiveDic"
                >新增</el-button
              ></el-col
            >
            <el-col :span="8"
              ><el-button
                v-rights="'UpdateArchiveDic'"
                type="primary"
                @click="updateArchiveDic"
                >编辑</el-button
              ></el-col
            >
            <el-col :span="8"
              ><el-button
                v-rights="'DeleteArchiveDic'"
                type="danger"
                @click="deleteArchiveDic"
                >删除</el-button
              ></el-col
            >
          </el-row>
          <el-tree
            ref="tree"
            style="width: 250px; margin-top: 12px"
            :props="{
              label: 'name',
            }"
            :filter-node-method="filterNode"
            class="customer-tree"
            :data="treeData"
            @node-click="handleNodeClick"
          >
            <span
              slot-scope="{ node }"
              class="custom-tree-node showname"
              :title="node.label"
            >
              <span>
                <i class="el-icon-folder-opened"></i>
                {{ node.label }}
              </span>
            </span>
          </el-tree>
        </div>
        <!-- 文件列表 -->
        <div class="sideBar-right" style="margin-left: 25px">
          <el-row>
            <el-col :span="2"
              ><el-button
                v-rights="'AddArchive'"
                type="success"
                @click="addArchive"
                >新增</el-button
              ></el-col
            >
            <el-col :span="2"
              ><el-button
                v-rights="'UpdaeArchive'"
                type="primary"
                @click="updaeArchive"
                >编辑</el-button
              ></el-col
            >
            <el-col :span="2"
              ><el-button
                v-rights="'DeleteArchive'"
                type="danger"
                @click="deleteArchive"
                >删除</el-button
              ></el-col
            >
          </el-row>
          <div class="child-table">
            <!--列表-->
            <el-table
              :data="list"
              element-loading-text="Loading"
              tooltip-effect="dark"
              height="calc(100% - 45px)"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column align="center" label="文件编号">
                <template slot-scope="scope">
                  {{ scope.row.archiveNum }}
                </template>
              </el-table-column>
              <el-table-column label="文件名称">
                <template slot-scope="scope">
                  {{ scope.row.archiveName }}
                </template>
              </el-table-column>
              <el-table-column label="文件状态">
                <template slot-scope="scope">
                  {{ scope.row.archiveStatusName }}
                </template>
              </el-table-column>
              <el-table-column label="操作人">
                <template slot-scope="scope">
                  {{ scope.row.operatorName }}
                </template>
              </el-table-column>
              <el-table-column label="操作时间">
                <template slot-scope="scope">
                  {{ scope.row.operatorDate }}
                </template>
              </el-table-column>
              <el-table-column label="文件说明">
                <template slot-scope="scope">
                  {{ scope.row.remark }}
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <div class="base-table-operation">
                    <el-link
                      v-if="showSelect(scope.row)"
                      size="mini"
                      type="primary"
                      @click="handleEdit(scope.row)"
                      >查看</el-link
                    >
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <BasePagination
              :total="pagination.total"
              :page-index="pagination.pageIndex"
              :page-size="pagination.pageSize"
              @sizeChange="sizeChange"
              @changePage="changePage"
            />
          </div>
        </div>

        <el-dialog
          v-if="innerDialogFormVisible"
          v-loading.lock="loadingSelect"
          class="base-dialog system-user-dialog"
          :append-to-body="true"
          title="查看文件"
          align="center"
          :close-on-click-modal="false"
          :visible.sync="innerDialogFormVisible"
        >
          <div>
            <el-table
              :data="archiveTable"
              element-loading-text="Loading"
              tooltip-effect="dark"
            >
              <el-table-column align="center" label="序号" width="50px">
                <template slot-scope="scope">
                  <span>{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="附件"
                prop="originalFileName"
              />
              <el-table-column label="操作" align="center" width="120px">
                <template slot-scope="scope">
                  <div style="margin: auto">
                    <el-link
                      size="mini"
                      type="primary"
                      @click="select(scope.row)"
                      >查看</el-link
                    >
                    <el-link
                      size="mini"
                      type="primary"
                      style="margin-left: 10px"
                      @click="downLoadArchive(scope.row)"
                      >下载</el-link
                    >
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div slot="footer" class="dialog-footer" align="center">
            <el-button type="primary" @click="close">关 闭</el-button>
          </div>
        </el-dialog>

        <ArchiveDicEdit
          v-if="archiveDicVisible"
          :id.sync="archiveDicId"
          ref="ArchiveDicEdit"
          :parent-id.sync="parentId"
          :operate-type.sync="operateType"
          :dialog-form-visible.sync="archiveDicVisible"
        />
        <ArchiveEdit
          v-if="archiveVisible"
          :id.sync="archiveId"
          ref="ArchiveEdit"
          :dialog-form-visible.sync="archiveVisible"
          :archive-dic-id.sync="archiveDicId"
          @close="closeArchiveEdit"
        />
        <BasePreviewFile
          v-if="previewFileShow"
          :preview-file-show.sync="previewFileShow"
          :preview-file="filepreview"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getList, deleteRecordList } from "../../../api/Archive/Archive.js";
import { GetTree, deleteRecord } from "../../../api/Archive/ArchiveDic";
import ArchiveEdit from "./ArchiveEdit.vue";
import ArchiveDicEdit from "./ArchiveDicEdit.vue";
import { GetStaticFileInfo, WordToImage } from "@/api/Base";
export default {
  name: "ArchiveList",
  components: { ArchiveEdit, ArchiveDicEdit },
  data() {
    return {
      operateType: "add",
      loading: true,
      loadingSelect: false,
      archiveVisible: false,
      previewFileShow: false,
      archiveDicVisible: false,
      innerDialogFormVisible: false,
      list: [],
      treeData: [],
      tableDatas: [],
      archiveTable: [],
      currentUserId: this.$store.getters.currentUserId,
      archiveId: "",
      archiveDicId: "",
      parentId: "",
      archiveDicName: "",
      archiveNumName: "",
      filepreview: {
        fileName: "",
        url: "",
        storageFileName: "",
      },
      queryForm: {
        archiveNum: "",
        archiveName: "",
        archiveNumName: "",
        archiveStatus: -1,
        remark: "",
        archiveDicId: 0,
        operatorId: 0,
        operatorDate: null,
      },
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  watch: {
    archiveDicName(val) {
      this.$refs.tree.filter(val);
    },
    archiveNumName(val) {
      this.queryForm.archiveNumName = val;
      this.getList();
    },
  },
  created() {
    this.loading = false;
    this.getTree();
    // this.getList();
  },
  methods: {
    closeArchiveEdit() {
      this.getList();
    },
    showSelect(row) {
      if (row.archiveStatus === 1) {
        var data = row.userIdList.find((x) => x === this.currentUserId);
        if (data) {
          return true;
        } else {
          return false;
        }
      } else {
        return true;
      }
    },
    // 编辑文件夹
    updaeArchive() {
      if (
        this.tableDatas === undefined ||
        this.tableDatas === null ||
        this.tableDatas.length === 0
      ) {
        this.$message.error("请选择数据");
        return false;
      }
      if (this.tableDatas.length > 1) {
        this.$message.error("最多选择一条数据");
        return false;
      }
      this.archiveId = this.tableDatas[0].id;
      this.archiveVisible = true;
    },
    deleteArchive() {
      this.$confirm("是否确认删除，此操作不可逆!", "删除", {
        type: "warning",
        confirmButtonText: "删除",
        okType: "danger",
        center: true,
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            var idList = this.tableDatas.map((x) => x.id);
            deleteRecordList({ idList: idList })
              .then((res) => {
                this.getList();
              })
              .finally(() => {
                instance.confirmButtonLoading = false;
                done();
              });
          } else {
            instance.confirmButtonLoading = false;
            done();
          }
        },
      });
    },
    handleSelectionChange(val) {
      this.tableDatas = val;
    },
    // 新增文件
    addArchive() {
      this.archiveId = "";
      this.archiveVisible = true;
    },
    // 删除文件夹
    deleteArchiveDic() {
      this.$confirm("是否确认删除，此操作不可逆!", "删除", {
        type: "warning",
        confirmButtonText: "删除",
        okType: "danger",
        center: true,
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            deleteRecord({ id: this.archiveDicId })
              .then((res) => {
                this.getList();
              })
              .finally(() => {
                instance.confirmButtonLoading = false;
                done();
              });
          } else {
            instance.confirmButtonLoading = false;
            done();
          }
        },
      });
    },
    // 编辑文件夹
    updateArchiveDic() {
      this.operateType = "update";
      this.archiveDicVisible = true;
    },
    // 新增文件夹
    addArchiveDic() {
      this.operateType = "add";
      this.archiveDicVisible = true;
    },
    handleNodeClick(data) {
      this.parentId = data.id;
      this.archiveDicId = data.id;
      this.queryForm.archiveDicId = data.id;
      this.getList("archive");
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    changePage(val) {
      this.pagination.pageIndex = val;
      this.getList();
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
      this.getList();
    },
    cancelForm() {
      this.$refs.queryForm.resetFields();
      this.$refs.tree.filter("");
      this.pagination.pageIndex = 1;
      this.getList();
    },
    getTree() {
      // 获取树数据
      GetTree().then((res) => {
        this.treeData = res.data;
      });
    },
    getList(val) {
      this.loading = true;
      if (!val) {
        this.getTree();
      }
      getList(this.queryForm, this.pagination)
        .then((res) => {
          this.list = res.data.dataList ? res.data.dataList : [];
          this.pagination.total = res.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    handleDelete(rowData) {
      this.Helper.deleteConfirm(() => {
        this.loading = true;
        deleteRecord({ id: rowData.id })
          .then((res) => {
            this.getList();
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      });
    },
    select(row) {
      this.loadingSelect = true;
      // 这里确定数据源
      this.filepreview.fileName = row.originalFileName; // 文件名称（包括后缀名）storageFileName
      this.filepreview.storageFileName = row.storageFileName;
      var houzui = this.filepreview.storageFileName.split(".")[1];
      houzui = houzui.toLowerCase();
      var houzuiArray = [
        "pdf",
        "doc",
        "docx",
        "png",
        "jpg",
        "bmp",
        "xlsx",
        "xls",
      ];
      if (houzuiArray.indexOf(houzui) === -1) {
        this.$message.warning("文件预览只支持图片,Word,PDF");
        return;
      }
      this.filepreview.urlList = null;
      this.filepreview.type = "";
      if (houzui === "docx" || houzui === "doc") {
        WordToImage({ filePath: row.filePath })
          .then((res) => {
            this.filepreview.urlList = res.data;
            this.filepreview.type = "img";
            this.loadingSelect = false;
            this.previewFileShow = true;
          })
          .catch(() => {
            this.loadingSelect = false;
          });
      } else {
        this.filepreview.url = row.filePath;
        this.loadingSelect = false;
        this.previewFileShow = true;
      }
    },
    downLoadArchive(row) {
      GetStaticFileInfo(row.filePath, row.originalFileName);
    },
    close() {
      this.innerDialogFormVisible = false;
    },
    handleEdit(rowData) {
      this.archiveTable = rowData.fileWarehouse;
      this.innerDialogFormVisible = true;
    },
  },
};
</script>
<style lang="scss" >
.showname {
  width: 63px; // 定宽
  overflow: hidden !important; // 溢出部分隐藏
  white-space: nowrap !important; //禁止自动换行
  text-overflow: ellipsis !important; // 使溢出部分以省略号显示
  display: block !important;
}
.DetectionItem-menu-content {
  padding: 0;
  background: #f8fbff;
  display: flex;
  align-items: flex-start;
  .menu-tree {
    width: 290px;
    height: 100%;
    overflow: auto;
    .menu-tree-header {
      width: 100%;
      padding: 16px 12px 12px;
      box-sizing: border-box;
      color: #4e4e4e;
      display: flex;
      align-items: center;
      & > span {
        font-size: 14px;
        font-weight: 600;
        display: block;
        margin-right: 12px;
      }
    }
    .el-tree {
      height: calc(100% - 64px);
      overflow: auto;
    }
  }
  .menu-detail {
    width: calc(100% - 260px);
    height: 100%;
    background: #fff;
    padding: 20px 0 20px 20px;
    overflow-y: auto;
    box-sizing: border-box;
    position: relative;
    display: block;
    align-items: flex-start;
    .menu-content {
      width: 50%;
      border-right: 1px #dedede solid;
    }
    .empty {
      height: calc(100% - 40px);
    }
    .menu-operation {
      width: 50%;
      padding: 0 24px;
      box-sizing: border-box;
    }
  }
  .customer-tree {
    text-overflow: ellipsis !important;
    background: #f8fbff;
    .el-tree-node__content {
      height: 40px;
      line-height: 40px;
      &:hover {
        color: #4787ff;
        background: rgba(47, 113, 245, 0.2);
      }
      .el-tree-node__label {
        font-size: 12px;
      }
      .el-tree-node__expand-icon {
        font-size: 16px;
        font-weight: bold;
        color: #999;
      }
      .is-leaf {
        color: transparent;
      }
    }
    .is-current {
      & > .el-tree-node__content {
        .el-tree-node__label {
          color: #4787ff;
          font-weight: 600;
        }
        .el-tree-node__expand-icon {
          color: #4787ff;
        }
        .is-leaf {
          color: transparent;
        }
      }
    }
  }
  .menu-form {
    margin-top: 32px;
    .el-form-item--small {
      margin-right: 24px;
    }
    .el-select {
      width: 100%;
    }
  }
}
</style>
